<!DOCTYPE html>
<html lang="zh-CN">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="" name="description">
    <meta content="" name="keys">
    <meta content="" name="author">
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/main.css' %}" rel="stylesheet">
    <style>
        .form-container {
            max-width: 400px; /* 表单容器的最大宽度 */
            margin: 50px auto; /* 使表单容器水平居中，并在顶部留出一些间距 */
            padding: 20px; /* 内边距 */
            background-color: #f5f5f5; /* 背景色 */
            border-radius: 10px; /* 圆角边框 */
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        }
        .error-message {
            color: red;
        }

    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <div><a class="navbar-brand" href="index.html" style="font-size:32px;">图书管理系统</a></div>
        </div>
    </div>
</nav>

<div class="container">
    <div class="form-container">
        <form class="form-signin" method="post" role="form">
            {% csrf_token %}
            <h2 class="form-signin-heading"><i class="glyphicon glyphicon-user"></i> 用户登录</h2>
            <div class="form-group has-success has-feedback">
                <input autofocus class="form-control" id="inputLogin" name="admin_login" placeholder="请输入登录账号"
                       required type="text">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                {% if form.admin_login.errors %}
                <div class="error-message">{{ form.admin_login.errors }}</div>
                {% endif %}
            </div>
            <div class="form-group has-success has-feedback">
                <input class="form-control" id="inputPassword" name="pwd" placeholder="请输入登录密码"
                       required style="margin-top:10px;" type="password">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                {% if form.pwd.errors %}
                <div class="error-message">{{ form.pwd.errors }}</div>
                {% endif %}
            </div>
            <div class="form-group has-success has-feedback">
                <select class="form-control" name="user_type" required>
                    <option value="user">普通用户</option>
                    <option value="admin">管理</option>
                </select>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="remember-me"> 记住我
                </label>
                <br>
                <label>
                    忘记密码
                </label>
                <label style="float:right">
                    <a href="reg.html">我要注册</a>
                </label>
            </div>
            <button class="btn btn-lg btn-success btn-block" type="submit">登录</button>
        </form>
    </div>
</div>

<script src="{% static 'jquery/jquery-2.1.1.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>